<template>
	<div class="alien-carousel">
		<div class="alien-carousel-content" ref="content">
			<div class="active">Side 1</div>
			<div class="next">Side 2</div>
			<div class="next-down">Side 3</div>
			<div class="prev-up">Side 4</div>
			<div class="prev">Side 5</div>
		</div>
		<button @click="onUp"><</button>
		<button @click="onDown">></button>
	</div>
</template>

<script>
export default {
	name: 'AlienCarousel',
	data() {
		return {
			activeId: 1
		}
	},
	computed: {},
	created() {
	},
	methods: {
		onUp() {
			if (this.activeId === 1) {
				this.activeId = 5;
			} else {
				this.activeId--;
			}
		},
		onDown() {
			if (this.activeId === 5) {
				this.activeId = 1;
			} else {
				this.activeId++;
			}
		},
		update() {
			let content = this.$refs.content;
			let children = content.children;
			for (let i = 0; i < children.length; i++) {
				children[i].className = this.getClassName(this.activeId, i + 1)
			}
		},
		getClassName(activeId, index) {
			if (activeId === index) {
				return 'active'
			}
			// 设置next
			let next = (activeId + 1) > 5 ? ((activeId + 1) - 5) : (activeId + 1);
			if (next === index) {
				return 'next'
			}
			// 设置nextDown
			let nextDown = (activeId + 2) > 5 ? ((activeId + 2) - 5) : (activeId + 2);
			if (nextDown === index) {
				return 'next-down'
			}

			// 设置prev
			let prev = (activeId - 1) < 1 ? (5 - (activeId - 1)) : (activeId - 1);
			console.info(prev, index, activeId)
			if (prev === index) {
				return 'prev'
			}
			// up
			return 'prev-up';
		}
	},
	filters: {},
	watch: {
		activeId() {
			this.$nextTick(() => {
				this.update()
			})
		}
	}
}
</script>

<style lang="scss">
.alien-carousel {
	position: relative;
	width: 1482px;
	margin: 0 auto;

	.alien-carousel-content {
		position: relative;
		width: 100%;
		height: 600px;
		white-space: nowrap;
		overflow: hidden;

		> div {
			width: 400px;
			height: 600px;
			display: inline-flex;
			justify-content: center;
			align-items: center;
			background: aliceblue;
			border: 1px solid #dedede;
			position: absolute;
			left: calc(50% - 200px);
			box-sizing: border-box;
			transition: all .3s;

			&.active {
				transform: scale(1);
				z-index: 3;
			}

			&.prev,
			&.next {
				z-index: 2;
				transform: scale(.85);
				margin-left: 300px;
			}

			&.prev-up,
			&.next-down {
				z-index: 1;
				transform: scale(.7);
				margin-left: 600px;
			}

			&.prev {
				margin-left: -300px;
			}

			&.prev-up {
				margin-left: -600px;
			}
		}
	}

}

</style>